<!--
Name: roleGroup
author: xingyuelongchen
QQ    : 237956234
Date  : 2021-06-24
-->
<template>
  <div class="page">
    <el-card class="left" shadow="never">
      <div slot="header" class=" flex-between">
        <span>用户组</span>
        <el-button size="mini" type="primary" @click="onAdd">新增</el-button>
      </div>
      <el-scrollbar>
        <div class="list">
          <div class="item" :class="{active:formData.id==item.id}" v-for="item in list" :key="item.id" @click="edit(item)">
            <span>{{item.name}}</span>
            <span>
              <el-button type="warning" size="mini" @click="onEdit(item)">修改</el-button>
              <el-button type="danger" size="mini" @click="onDel(item)">删除</el-button>
            </span>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
    <el-card class="right" shadow="never">
      <div slot="header">
        <span style="margin-right:20px">权限列表</span>
        <el-button type="primary" size="small" @click="checkAll" :disabled="!formData.id">全选</el-button>
        <el-button type="success" size="small" @click="onEditSave" :disabled="!formData.id">保存权限</el-button>
      </div>
      <el-cascader-panel :value="formData.roles" :options="treeData" :props="{label:'name',value:'id',multiple:true,checkStrictly:true,emitPath:false}" @change="changeCheck" />
    </el-card>
  </div>
</template>
<script>
import { roleGroup_add, roleGroup_del, roleGroup_edit, roleGroup_list, role_tree } from "@/api";
export default {
  name: "roleGroup",
  data() {
    return {
      list: [],
      treeData: [],
      formData: { roles: [] },
      checkArr: []
    };
  },
  created() {
    this.getlist();
    this.getTree();
  },
  methods: {
    // 获取用户组列表
    async getlist() {
      let { data } = await roleGroup_list();
      this.list = data?.data?.data || [];
    },
    // 获取权限树
    async getTree() {
      let { data } = await role_tree();
      let arr = data?.data || [];
      this.treeData = JSON.parse(
        JSON.stringify(arr, (a, b) => {
          if (b?.children && !b.children.length) b.children = null;
          return b;
        })
      );
    },
    // 新增用户组
    async onAdd() {
      let { value: name } = await this.$prompt("请输入用户组名称", "新增用户组", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\w\d\u4e00-\u9fa5]{2,15}$/,
        inputErrorMessage: "只允许2-15为字母、数字、汉字"
      });
      await roleGroup_add({ name });
      this.getlist();
    },
    // 修改名称
    async onEdit(item) {
      let { value: name } = await this.$prompt("请输入用户组名称", "修改名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[\w\d\u4e00-\u9fa5]{2,15}$/,
        inputErrorMessage: "只允许2-15为字母、数字、汉字",
        inputPlaceholder: item.name
      });
      await roleGroup_edit({ name, id: item.id });
      this.getlist();
    },
    // 删除用户组
    async onDel(item) {
      let { id } = item;
      await roleGroup_del({ id });
      this.getlist();
    },
    // 修改权限
    edit(item) {
      this.formData = { ...item };
    },
    // 保存修改权限
    async onEditSave() {
      let params = { ...this.formData };
      await roleGroup_edit(params);
      this.getlist();
      this.edit(params);
    },
    checkAll() {
      let arr = [];
      JSON.stringify(this.treeData, (a, b) => {
        if (b && b?.id) arr.push(b.id);
        return b;
      });
      this.formData.roles = arr;
    },
    // 改变选中数据
    changeCheck(data) {
      // let arr = data.map((e) => this.findDeep(this.treeData, e));
      // console.log(arr);
      // if (arr.length) arr = [...new Set(arr.reduce((a, b) => a.concat(b)))];
      // this.formData.roles = arr;
      let a = [];
      data.forEach((e) => a.push(...this.treeFindChild(this.treeData, e)));
      this.formData.roles = [...new Set(a)];
    },
    // 子节点查找祖先节点
    treeFindChild(data, val, { key = "id", children = "children" } = {}) {
      let arr = [];
      function find(data, val) {
        for (let index = 0; index < data.length; index++) {
          const item = data[index];
          arr.push(item[key]);
          if (item[key] === val) return val;
          if (item[children]?.length) {
            let childrenFind = find(item[children], val);
            if (childrenFind) return childrenFind;
          }
          arr.pop();
        }
      }
      find(data, val);
      return arr;
    }
  }
};
</script>
<style lang='scss' scoped>
.page {
  height: 100%;
  display: flex;
  align-items: stretch;
  flex-direction: row !important;
  justify-content: space-between;
  .left {
    flex: 0 0 350px;
    margin-right: 20px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
  .right {
    flex: 1 1 auto;
  }
}
</style>